import React from 'react';
import { List, InputItem, WhiteSpace, Button, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import { connect } from 'dva';
import MyIcon from '../components/Base/MyIcon';
import { Link } from 'dva/router';
import styles from './LoginPage.css';
import loginForm from '../components/Home/HomeGrid.less';

class LoginPage extends React.Component {

  componentDidMount() {
    const height1 = document.documentElement.scrollHeight;
    const height2 = window.innerHeight;
    if (height1 <= height2) {
      this.footer.style.marginTop = height2 - this.footer.offsetTop - 20 + 'px';
    } else {
      this.footer.style.marginTop = '50px';
    }
  }

  login = () => {
    this.props.form.validateFields((error, value) => {
      if (error) return;
      if (value.phone) {
        value.phone = value.phone.replace(/\s/ig, '');
      }
      this.props.dispatch({
        type: 'auth/login',
        payload: value,
      });
    });

    // this.props.dispatch(routerRedux.push({
    //   pathname: '/',
    // }));
  };

  render() {
    const { getFieldProps } = this.props.form;
    return (

      <div className={styles.body}>

        <div className={styles.logo}>
          <img className={styles.logoImg} src={require("../assets/login_title.png")} alt="" />
        </div>

        <div className="loginForm">
        <List renderHeader={() => 'Customize to focus'}>
          <InputItem
            {...getFieldProps('phone')}
            className={styles.input}
            type="phone"
            placeholder="手机号码/用户名"
          ><MyIcon type="user" className={styles.icon} /></InputItem>

          <InputItem
            {...getFieldProps('password')}
            className={styles.input}
            type="password"
            placeholder="密码"
          ><MyIcon type="password" className={styles.icon} /></InputItem>
          <Button type="ghost" style={{ background: "rgb(0,175,206)", color: "white" }} className={styles.login} onClick={this.login} loading={this.props.loading}>登录</Button>
          <WhiteSpace />
          <div>
            <Link className={styles.findPwd} to="/findpwd">找回密码</Link>
            <a className={styles.try} href="https://h.eqxiu.com/s/8Q3WZXkv">申请试用账号</a>
          </div>
        </List>
        </div>
        <div className={styles.footer} ref={el => this.footer = el}>广州启尔智信息科技有限公司</div>
      </div>

    );
  }
}

export default connect((state) => {
  return { loading: state.loading.models.auth };
})(createForm()(LoginPage));

